<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/25
  Time: 16:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<div class="modal fade">--%>
<%--<div class="modal-dialog .modal-fullscreen">--%>
<%--<div class="modal-content">--%>
<%--QQQQQQQ 全屏显示--%>
<%--</div>--%>
<%--</div>--%>
<%--</div>--%>

<div class="container-fluid">
    <link rel="stylesheet" href="/static/markdown/css/editormd.css" />
    <link rel="stylesheet" href="/static/dist/lib/datetimepicker/datetimepicker.css">
    <link rel="stylesheet" href="/static/dist/lib/chosen/chosen.css">
    <div class="row">
        <div class="col-md-12">活动发布</div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <form id="activityInfo-form-add" name="activityInfoForm" enctype="multipart/form-data" method="post" >
                <fieldset>
                    <div class="form-group">
                        <div class="row">
                            <!-- 活动内容区域 -->
                            <div class="col-md-9">
                                <div class="input-control has-label-left-sm">


                                    <div id="layout">
                                        <div id="test-editormd">
                                            <textarea id="editormd-markdown-textarea"># 欢迎使用 Cmd Markdown 编辑阅读器</textarea>
                                        </div>
                                    </div>


                                </div>
                            </div>


                            <!-- 活动属性区域 -->
                            <div class="col-md-3">
                                <div class="input-control has-label-left-lg">

                                    <div class="row">
                                        <div class="form-group">
                                            <button type="button" class="btn btn-primary" id="user_btn_save">保存草稿</button>
                                            <button type="button" class="btn btn-primary" id="user_btn_push">发布</button>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">名称</label>
                                            <input type="text" name="name" id="activityName" class="form-control" placeholder="活动名称" />
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">主题</label>
                                            <input type="text" name="title" id="activityTitle" class="form-control" placeholder="活动主题" />
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">出发地</label>
                                            <div class="input-group"  data-link-field="dtp_input1" placeholder="出发地" >
                                                <span class="input-group-addon" id="fromAddress" style="cursor:pointer;" onclick="openModalTrigger('fromAddress')"><span class="icon-location-arrow"></span></span>
                                                <input class="form-control" size="16" type="text" value="" id="fromAddressText">
                                                <input type="hidden" value="" id="fromAddressLnglat">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">目的地</label>
                                            <div class="input-group"  data-link-field="dtp_input1" placeholder="目的地" >
                                                <span class="input-group-addon" id="destinationAddress" style="cursor:pointer;" onclick="openModalTrigger('destinationAddress')"><span class="icon-location-arrow"></span></span>
                                                <input class="form-control" size="16" type="text" value="" id="destinationAddressText">
                                                <input type="hidden" value="" id="destinationAddressLnglat">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">出发时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="出发时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" name="startTime" id="activityStartTime" size="16" type="text" value="" readonly="">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">结束时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="出发时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" name="endTime" id="activityEndTime" size="16" type="text" value="" readonly="">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">出行方式</label>
                                            <select class="form-control" name="travelMode" id="activityTravelMode">
                                                <option value="">无</option>
                                                <option value="">公交车</option>
                                                <option value="">小车</option>
                                                <option value="">大巴</option>
                                                <option value="">火车</option>
                                                <option value="">飞机</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">人数上限</label>
                                            <input type="text" name="maximumPeople" id="maximumPeople" class="form-control" placeholder="人数上限" />
                                        </div>
                                    </div>



                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">活动类型</label>
                                            <select class="form-control" name="type" id="activityType">
                                                <option value="">无</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">集合点</label>
                                            <div class="input-group"  data-link-field="dtp_input1" placeholder="集合点" >
                                                <span class="input-group-addon" id="meetingAddress" style="cursor:pointer;" onclick="openModalTrigger('meetingAddress')"><span class="icon-location-arrow"></span></span>
                                                <input class="form-control" size="16" type="text" value="" id="meetingAddressText">
                                                <input type="hidden" value="" id="meetingAddressLnglat">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">集合时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="集合时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" size="16" name="meeting" id="meetingTime" type="text" value="" readonly="">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">途径位置</label>
                                            <div class="input-group"  data-link-field="dtp_input1" placeholder="途径位置" >
                                                <span class="input-group-addon" id="pathwayAddress" style="cursor:pointer;" onclick="openModalTrigger('pathwayAddress')"><span class="icon-location-arrow"></span></span>
                                                <input class="form-control" size="16" type="text" value="" id="pathwayAddressText">
                                                <input type="hidden" value="" id="pathwayAddressLnglat">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">是否产生费用</label>
                                            <div class="switch">
                                                <input type="checkbox" name="isCost" id="isCost" value="0">
                                                <label>是否产生费用</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="cost_row" style="display: none;">
                                        <div class="form-group">
                                            <label class="label">活动费用</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">￥</span>
                                                <input type="number" class="form-control" name="cost" id="activityCost" placeholder="请输入活动费用金额">
                                                <span class="input-group-addon">.00</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">发布时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="出发时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" size="16" name="releaseTime" id="releaseTime" type="text" value="" readonly="">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">发布人</label>
                                            <input type="text" class="form-control" placeholder="发布人" />
                                        </div>
                                    </div>






                                </div>
                            </div>

                        </div>
                    </div>

                </fieldset>
            </form>
        </div>
    </div>

    <div id="myStyleModal"></div>

    <script src="/static/markdown/editormd.min.js"></script>
    <script src="/static/dist/lib/datetimepicker/datetimepicker.js"></script>
    <script src="/static/dist/lib/chosen/chosen.js"></script>
    <script src="https://cdn.bootcss.com/showdown/1.9.1/showdown.js"></script>
    <script type="text/javascript">
        var testEditor;

        var selectAddressModalT = $.zui.modalTrigger;

        $(function() {
            initMarkdown();
            var content = $('#editormd-markdown-textarea').val(); //获取值
            console.log(content);

            initDatetimePicker();

            initLvType();

        });

        function initMarkdown() {
            testEditor = editormd("test-editormd", {
                width   : "100%",
                height  : 1100,
                syncScrolling : "single",
                path    : "/static/markdown/lib/"
            });
        }

        /**
         * 初始化时间控件
         */
        function initDatetimePicker() {
            // 选择时间和日期
            $(".form-datetime").datetimepicker(
                {
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    format: "yyyy-mm-dd hh:ii"
                });

            $('#isCost').on('change', function () {
                if($(this).prop("checked")) {
                    $('#cost_row').show();
                }else {
                    $('#cost_row').hide();
                }
            });
        }

        /**
         * 打开模态对话框
         */
        function openModalTrigger (inptuId) {
            var __opp = {
                title: '选择位置',
                //custom: '#myStyleModal',
                remote: '/admin/activity/selectSite?selectType='+inptuId,
                backdrop: false,
                size: 'fullscreen',
                keyboard: false
            };
            selectAddressModalT.show(__opp);
        }

        function initLvType() {
            /**
             * 初始化上级资源
             */
            $.post('/admin/activity/type/all', {}, function(res) {
                var html = "";
                for(index in res.data){
                    if(res.data[index]){
                        html += "<option value='" + res.data[index].id + "'>" + res.data[index].name + "</option>";
                    }
                }
                $('#activityType').append(html);
                $('#activityType').chosen({
                    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 10, // 10 个以下的选择项则不显示检索框
                    search_contains: true         // 从任意位置开始检索
                });
            });
        }

        $('#user_btn_push').on('click', function () {

        });

        $('#user_btn_save').on('click', function () {
            var _fData = $('form[name=activityInfoForm]').serializeArray();
            console.log(_fData);
            var content = $('#editormd-markdown-textarea').val(); //获取值
            console.log(content);
            var converter = new showdown.Converter();
            var _html = converter.makeHtml(content);
            console.log(testEditor);
            var _content = {
                name: "startTime"
                value: ""
            };
            console.log(_html);
        });




    </script>

    <%--<jsp:include page="markdown-demo.jsp" />--%>
</div>